import React, { useState } from 'react'
import { NavBar, Toast, Input } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

export default function QtLogin() {
  const navigate = useNavigate()

  const back = () => Toast.show({
          content: '点击了返回区域',
          duration: 1000,
  },navigate('/login'));

  const [value, setValue] = useState('')
  const [password,setPassword] = useState('')
  const dButton = () => {
      if(!value){
        alert('请输入手机号或者ID')
      }else if(!password){
          alert('请输入密码')
      }else{
        navigate('/my')
      }
  }
  const dButtons = () => {
    alert('请先同意隐私政策与用户协议')
    return
  }
  const [fase, setFase] = useState(false)
  const faseButton = () => {
      setFase(!fase)
  }

  return (
    <div>
      <NavBar onBack={back}>手机号登录</NavBar>
      <div style={{padding:'0 40px'}}>
        <div style={{paddingLeft:'100px',marginTop:'50px'}}>
          <img width={'100px'}height={'100px'} style={{borderRadius:'50%'}} src='./img6.png'/>
        </div>
        <Input
            placeholder='请输入手机号或ID'
            style={{borderBottom:'1px solid',marginTop:'70px'}}
            value={value}
            onChange={val => {
                setValue(val)
            }}
        />
        <Input
            placeholder='请输入密码'
            style={{borderBottom:'1px solid',marginTop:'50px'}}
            value={password}
            onChange={val => {
                setPassword(val)
            }}
        />
        <div style={{display:'flex',justifyContent:'space-between',marginTop:"15px"}}>
          <span >忘记密码</span>
          <span>立即注册</span>
        </div>

        <div>
            <button className={fase?'back1':'button_login_logins'}  onClick={()=>{ dButtons() }}>
                立即登录
            </button>
            <button className={fase?'button_login_login':'back1'}  onClick={()=>{ dButton() }}>
                立即登录
            </button>
        </div>

        <div style={{display:'flex',justifyContent:'center', alignItems: 'center', marginTop: '30px'}}>
            <input 
                type='checkbox' 
                onChange={(ever)=>{faseButton(ever.target.checked)}}
                style={{ marginRight: '8px' }}
            />
            <p style={{fontSize:'15px'}}>
                我已阅读并同意<span style={{color:'red'}}><u>隐私政策</u></span>与<span style={{color:'red'}}><u>用户协议</u></span>
            </p>
        </div>
      </div>
    </div>
  )
}
